<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java 文档搜索引擎</title>

    <link rel="stylesheet" href="./css/index.css">
</head>
<script src="./js/jquery.js"></script>

<body>
    <!-- 整个容器的高度 -->
    <div class="container">
        <!-- 搜索框 + 按钮 -->
        <div class="header">
            <input type="text">
            <button id="search-btn">↬ 搜索 ↫</button>
        </div>

        <!-- 这里显示搜索的结果 -->
        <div class="result">
            <!-- 这里的一个div就是搜索的一条记录 -->
            <!-- <div id="count">铁铁，为你查找到 1100 条数据结果！</div> -->
            <!-- <div class="item">
                <a href="#">点击跳转</a>
                <div class="desc"></div>
                <div class="url">http://www.baidu.com</div>
            </div> -->
        </div>
    </div>
</body>

<script>
    // 先获取到按钮，添加点击事件
    let button = document.querySelector("#search-btn");
    button.onclick = function () {
        // 获取到输入框中的内容
        let query = jQuery(".header input").val();
        if (query == "") {
            alert("请输入查询词！");
            jQuery(".header input").focus();
            return;
        }
        console.log("查询词为：" + query);
        jQuery.ajax({
            type: "GET",
            url: "/searcher/getlist",
            data: { "query": query },
            success: function (data) {
                // 根据响应生成对应的页面
                buildResult(data);
            }
        });

        function buildResult(data) {
            let result = jQuery(".result"); // 先获取到结果标签
            result.val('');
            let countDiv = '<div id="count">铁铁，为你查找到 ' + data.data.length + ' 条数据结果！</div>';
            if (data != null && data.code == 200 && data.data != null) {
                let newElem = countDiv;
                for (let i = 0; i < data.data.length; i++) {
                    let elem = data.data[i];
                    newElem += '<div class="item">';
                    newElem += '<a href="' + elem.url + '" target="_blank">' + elem.title + '</a>';
                    newElem += '<div class="desc">' + elem.dec + '</div>';
                    newElem += '<div class="url">' + elem.url + '</div>';
                    newElem += '</div>';
                }
                result.html(newElem);
            } else if (data.data == null) {
                // 查询不到搜索出来的数据
                alert("暂无你要搜索的内容！")
                return;
            } else {
                alert("非法的参数！");
                return;
            }
        }
    }
</script>

</html>